<template>
  <el-dialog :title="title" v-model="visible" append-to-body :lock-scroll="true" center
    custom-class="RegularPop dataSource" :close-on-click-modal="false">
    <el-form :model="form" :rules="rules" ref="ruleFormRef" :inline="true">
      <h1>信息</h1>
      <el-row>

        <el-col :span="12">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入标题" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="标识" prop="ident">
            <el-input v-model="form.ident" placeholder="请输入标识" clearable />
          </el-form-item>
        </el-col>

      </el-row>
      <!-- <el-row>
          <el-col >
          <el-form-item label="数据接口" prop="api">
            <el-input v-model="form.api" placeholder="请输入数据接口" clearable />
          </el-form-item>
        </el-col>
      </el-row>
        <el-row>
        <el-col>
          <el-form-item label="详情接口" >
            <el-input v-model="form.detailApi" placeholder="请输入详情接口" clearable />
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">返回</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { addFacilities, updateFacilities } from '@/api/screen/facilities'
const { proxy } = getCurrentInstance();
const title = ref("");
const visible = ref(false);
const data = reactive({
  form: {

  },
  rules: {
    title: [{ required: true, message: "请输入标题", trigger: "blur" }],
    clientId: [{ required: true, message: "请输入appId!", trigger: "blur" }],
    ident: [
      { required: true, message: "请输入标识!", trigger: "blur" },
    ],
    // api:[ { required: true, message: "请输入数据接口!", trigger: "blur" },]

  },
});

const { form, rules } = toRefs(data);
/** 重置操作表单 */
function reset() {
  form.value = {
  };
  proxy.resetForm("ruleFormRef");
}
// 显示弹框
function add() {
  reset();
  visible.value = true;
  title.value = "新增可视化设施配置";

}
const edit = (row) => {
  console.log('修改', row)
  reset();
  visible.value = true;
  title.value = "修改可视化设施配置";
  form.value = Object.assign({}, row);

}
/** 取消按钮 */
function cancel() {
  reset();
  visible.value = false;

};
function submitForm() {
  proxy.$refs['ruleFormRef'].validate(valid => {
    if (valid) {
      if (form.value.id != undefined) {
        updateFacilities(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          visible.value = false;
          proxy.$emit('refresh')
        }).catch(err => {
          console.log('err', err)
        })
      } else {
        addFacilities(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          visible.value = false;
          proxy.$emit('refresh')
        }).catch(err => {
          console.log('err', err)
        })

      }
    } else {
      proxy.$modal.msgError("提交失败！");
      return false;
    }
  })
}
defineExpose({
  add, edit
});
</script>
